<template lang="">
    <div>
        <el-dialog :before-close="cancel" center :title="isAdd ? '添加限时秒杀' : '修改限时秒杀'"  :visible.sync="isShow">
       <el-form :model="seckForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="title">
    <el-input v-model="seckForm.title"></el-input>
  </el-form-item>
  <el-form-item label="活动期限" label-width="100px">
  <el-date-picker
      v-model="value"
      size="large"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </el-form-item>
   
   <el-form-item  label="一级分类" :label-width="formLabelWidth">
      <el-select @change="changeCate(false)" v-model="seckForm.first_cateid" placeholder="请选择">
        <el-option
               v-for="item in catelist"
               :value="item.id"
               :key="item.id"
               :label="item.catename"
               ></el-option>
      </el-select>
    </el-form-item> <el-form-item label="二级分类" :label-width="formLabelWidth" >
      <el-select @change='changeSan(false)' v-model="seckForm.second_cateid" placeholder="请选择">
        <el-option 
                v-for="item in secondArr"
                :value="item.id"
                :key="item.id"
                :label="item.catename"></el-option>
      </el-select>
    </el-form-item> <el-form-item label="商品" :label-width="formLabelWidth">
      <el-select  v-model="seckForm.goodsid" placeholder="请选择商品">
        <el-option v-for="item in seckData"
                    :key="item.id"
                    :value="item.id"
                    :label="item.goodsname"></el-option>
      </el-select>
    </el-form-item>
          <el-form-item  label="状态">
   <el-switch
    v-model="seckForm.status"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="2">
  </el-switch>
</el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
  </el-dialog>
    </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { seckAdd, seckInfo, seckEdit,goodsList } from '../../request/api'
export default {
  props: ['isShow', 'isAdd'],
  data() {
    return {
      // 设置二级分类数据
      secondArr: [],
      // 设置三级分类数据
      seckData:[],
      seckForm: {
        title: '',
        begintime: '',//开始时间
        endtime: '',//结束时间
        first_cateid: '',//商品一级分类编号
        second_cateid: '',//商品二级分类编号
        goodsid: '',//商品编号
        status: 1,//状态  1正常2禁用
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: [],
      formLabelWidth: '120px'

    }
  },
  mounted() {
    // 组件一加载调用分类列表接口
    this.getCate()
      // 组件一加载调用商品接口
      // this.getGoods()
  },
  computed: ({
    ...mapGetters({
      catelist: "cate/getCateList",
      // goodslist: "goods/getGoodsList"
    })
  }),

  methods: {
    // 切换一级分类的方法
    changeCate(n) {
      let index = this.catelist.findIndex(item => item.id == this.seckForm.first_cateid)
      // console.log(index, 'index');
      this.secondArr = this.catelist[index].children
      // 清空二级分类的双向绑定
      if (!n) {
        this.seckForm.second_cateid = ''
         this.seckForm.goodsid = ''
      }

    },
    // 三级分类商品
    changeSan(n){
      let fid = this.seckForm.first_cateid
      let sid = this.seckForm.second_cateid
      goodsList({fid,sid}).then(res=>{
        console.log(res,'@@@@@@@@');
        if(res.code==200){
          this.seckData = res.list
        }
      })

      if(!n){
        this.seckForm.goodsid = ''
      }
    },
    ...mapActions({
      getSeckList: "seck/changeSeckListActions",
      getCate: 'cate/changeCateAction',
      getGoods: "goods/getGoodsListAction"
    }),
    // 取消
    cancel() {
      this.$emit('cancel', false);
      this.reset()
    },
    // 清空
    reset() {
      this.seckForm = {
        title: '',
        begintime: '',//开始时间
        endtime: '',//结束时间
        first_cateid: '',//商品一级分类编号
        second_cateid: '',//商品二级分类编号
        goodsid: '',//商品编号
        status: 1,//状态  1正常2禁用
      }
      // 调用清空验证的方法
      this.$refs.ruleForm.resetFields();
      this.value = ''
    },
    lockup(id) {
      seckInfo({ id }).then((res) => {
        if (res.code == 200) {
          this.seckForm = res.list
          this.seckForm.begintime = new Date(parseInt(this.seckForm.begintime));
          this.seckForm.endtime = new Date(parseInt(this.seckForm.endtime));
          this.value = [
            this.seckForm.begintime,
            this.seckForm.endtime
          ]
          this.seckForm.id = id
          this.changeSan(true)
          // 从新调用change事件  实现列表渲染
          this.changeCate(true)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    confirm() {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          this.seckForm.begintime = new Date(this.value[0]).getTime();
          this.seckForm.endtime = new Date(this.value[1]).getTime()
          // 通过isAdd
          if (this.isAdd) {
            seckAdd(this.seckForm).then((res) => {
              console.log(this.seckForm,'表单对象');
              // console.log(res, '添加');
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getSeckList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // console.log('编辑');
            seckEdit(this.seckForm).then((res) => {
              console.log(res, '添加');
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getSeckList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    }
  },

}
</script>
<style lang="">
    
</style>